<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #dv {
            position: relative;
        }

        #dv .panel .panel-heading .panel-title {
            padding: 0 0 20px 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0, 0, 0, .7);
        }
        .update{
            width: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -300px;
            z-index: 1000;
            background-color: #fff;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="dv">
    <div class="mask" v-if="flag"></div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">课程表</h3>
        </div>
        <div class="panel-body">
            <courseadd @addfunc="addList"></courseadd>
            <courselist :list="list" @delfun="delList" @updatefun="update"></courselist>
        </div>
    </div>
    <courseupdate v-if="flag" :course="course" @cancelfun="cancel" @updatefun="updateSure"></courseupdate>

</div>

<template id="addcourse">
    <form class="form-inline">
        <div class="form-group">
            <label for="example">ID</label>
            <input type="text" class="form-control" id="example" placeholder="id" v-model="courseid">
        </div>
        <div class="form-group">
            <label for="exampleInputName2">课程名称</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="课程名称" v-model="courseName">
        </div>
        <div class="form-group">
            <label for="exampleInputName">课程编码</label>
            <input type="text" class="form-control" id="exampleInputName" placeholder="课程编码" v-model="courseNumber">
        </div>
        <button type="button" class="btn btn-primary" @click="add">添加</button>
    </form>
</template>
<template id="courselist">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>课程名称</th>
            <th>课程编码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list">
            <td>{{ item.id }}</td>
            <td>{{ item.courseName }}</td>
            <td>{{ item.courseNo }}</td>
            <td>
                <a href="" class="btn btn-primary" @click.prevent="modify(item.id)">修改</a>
                <a href="" class="btn btn-warning" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</template>
<template id="updatecourse">
    <div class="panel panel-primary update">
        <div class="panel-heading">
            <h3 class="panel-title">修改课程表</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="input2" class="col-sm-2 control-label">课程名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input2" placeholder="课程名称" v-model="upCorName">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input3" class="col-sm-2 control-label">课程编码</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input3" placeholder="课程编码" v-model="upCorNum">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" @click="update">确定</button>
                        <button type="button" class="btn btn-warning" @click="cancel">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script>

    new Vue({
        el: '#dv',
        data: {
            list: [
                {id: 1, courseName: '前端', courseNo: 22},
                {id: 2, courseName: '前端', courseNo: 22},
                {id: 3, courseName: '前端', courseNo: 22},
                {id: 4, courseName: '前端', courseNo: 22},
                {id: 5, courseName: '前端', courseNo: 22},
                {id: 6, courseName: '前端', courseNo: 22},
            ],
            course: null,
            flag: false
        },
        methods: {
            addList(list) {
                this.list.push(list)
            },
            delList(value) {
                let id = this.list.findIndex(item => item.id == value)
                this.list.splice(id, 1)
            },
            update(obj) {
                this.flag = obj.flag
                let courseItem = this.list.find(item => item.id == obj.id)
                this.course = courseItem
            },
            cancel(value){
                this.flag = value
            },
            updateSure(obj){
                let index = this.list.findIndex(item => item.id == obj.id)
                this.list[index] = obj
                this.flag = false
            }
        },
        components: {
            courseadd: {
                template: '#addcourse',
                data() {
                    return {
                        courseName: '',
                        courseNumber: '',
                        courseid: ''
                    }
                },
                methods: {
                    add() {
                        this.$emit('addfunc',
                            {
                                id: this.courseid,
                                courseName: this.courseName,
                                courseNo: this.courseNumber
                            })
                    },
                }
            },
            courselist: {
                template: '#courselist',
                props: {
                    list: {
                        type: Array,
                        required: true
                    },
                },
                methods: {
                    del(id) {
                        this.$emit('delfun', id)
                    },
                    modify(id) {
                        this.$emit('updatefun', {id: id, flag: true})
                    }
                }
            },
            courseupdate: {
                template: '#updatecourse',
                data() {
                    return {
                        upCorName: '',
                        upCorNum: '',
                        id:''
                    }
                },
                props:['course'],
                methods: {
                    update() {
                        this.$emit('updatefun',{
                            'id':this.id,
                            'courseName':this.upCorName,
                            'courseNo':this.upCorNum
                        })
                    },
                    cancel() {
                        this.$emit('cancelfun',false)
                    }
                },
                created(){
                  this.id = this.course.id
                  this.upCorName = this.course.courseName
                  this.upCorNum = this.course.courseNo
                },
            }
        }
    })
</script>
</body>
</html>